<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>易经八卦</title>
  <style>
    [v-clock] {
      display: none;
    }

    html,
    body,
    p {
      padding: 0;
      margin: 0;
    }

    body {
      height: 100vh;
      background: url('./img/head.jpg') repeat-y;
      background-size: cover;
      background-color: #C39B6A;

      color: #252221;
      font: 16px "宋体", "Arial Narrow", HELVETICA;
    }

    .title {
      text-align: center;
      line-height: 50px;
      font-size: 26px;
      color: #61452c;
    }

    /* 骰子样式 */
    .box {
      margin: 0 auto;
      position: relative;
      display: flex;
      flex-wrap: wrap;
      /* justify-content: space-evenly; */
    }

    .base {
      position: relative;
      background-color: #fff;
      margin: 10px 10px;
      text-align: center;
      cursor: pointer;
    }

    .global {
      display: flex;
      justify-content: center;
      align-items: center;

      background-size: contain;
      background-repeat: no-repeat;
      background-image: linear-gradient(180deg, #FE8A5C 0%, #FF4D4D 100%);
      border-radius: 50%;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      margin: 10px 10px;
      width: 60px;
      height: 60px;
    }

    .shadow {
      position: absolute;
      z-index: 0;
      bottom: 20px;
      left: 10px;
      width: 60px;
      height: 10px;
      box-shadow: 0 17px 6px rgba(0, 0, 0, .3);
      border-radius: 28px 32px 13px 21px;
    }

    img {
      width: 100%;
      height: 100%;
    }

    #btn {
      display: block;
      width: 160px;
      height: 40px;
      margin: 0 auto;
      color: #fff;
      border-radius: 8px;
      font-size: 16px;
      background-color: #61452c;
      cursor: pointer;
    }

    /* 骰子 */
    .today-luck-content {
      position: relative;
      width: 96%;
      margin: 20px auto;
      margin-top: 60px;
      min-height: 40vh;
      font-size: 20px;
      color: #333;
      background: url('./img/jz.jpg') no-repeat;
      background-size: 100% 100%;
      text-align: center;
    }

    .yi-con {
      padding: 3.13vw 3.91vw 3.13vw 16.15vw;
    }

    .yi-des {
      font-size: 22px;
      padding: 8px 0 6px 0;
    }

    .yi-con .yi-con-tit {
      font-size: 26px;
      padding: 8px 0 6px 0;
    }

    @media screen and (max-width: 414px) {
      .today-luck-content {
        background: none;
      }

      .yi-con {
        padding: 0;
      }
    }
  </style>
</head>

<body>
  <div id="app">
  </div>
  <script src="./js/yi.js"></script>
  <script src="./js/zy.js"></script>
  <script src="./js/zb.js"></script>
  <script src="./js/vue.runtime.min.js"></script>
  <script>
    function getToday() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const min = date.getMinutes()
      const s = date.getSeconds()
      return { year, month, day, hour, min, s }
    }
    //包含n-m之间的随机数
    myRandom = function(seed) {
      return ('0.' + Math.sin(seed || (+new Date)).toString().substr(6));
    }
    const rangeRandom = (n, m, seed) => Math.floor(myRandom(seed) * (m - n + 1)) + n

  </script>
  <script>
    const zy = new ZY()
    new Vue({
      el: '#app',
      render(h) {
        return h('div', {}, [
          h('header', {}, ['', h('div', { class: 'title' }, ['===易经算命==='])]),
          h('div', { class: 'box' }, [
            this.goodGood.map(item => {
              return h('div', { class: 'base', on: { click: this.lookGuaRes.bind(this, item) } }, [
                h('div', { class: 'sign' }, [item.txt]),
                h('div', { class: 'global' }, [item.source]),
                h('div', { class: 'shadow' }),
              ])
            })
          ]),
          h('button', { attrs: { id: 'btn' }, on: { click: this.shakeIt } }, [this.shakeText]),
          h('div', { class: 'today-luck-content' }, [
            this.zhanbu ? h('div', { class: 'yi-con', domProps: { innerHTML: this.zhanbu } }, []) :
              h('div', { class: 'yi-con' }, [
                h('p', { domProps: { innerHTML: this.octant.gua } }),
                h('p', { class: 'yi-con-tit' }, ['===六爻===']),
                h('p', { domProps: { innerHTML: this.octant.sixyao } }),
                h('p', { class: 'yi-con-tit' }, ['===彖辞===']),
                h('p', { domProps: { innerHTML: this.octant.outtuan } }),
                h('p', { class: 'yi-con-tit' }, ['===象传===']),
                h('p', { domProps: { innerHTML: this.octant.outxiang } }),
              ])
          ])
        ])
      },
      data() {
        return {
          goodGood: [],

          shakeText: '点击一夜暴富',

          resultArr: [],
          octant: {},
          zhanbu: ''
        }
      },
      methods: {
        shakeIt() {
          this.getZY()
        },
        getZY() {
          let temp = []
          const { year, month, day } = getToday()
          let times = 0
          do {
            times++
            const num = rangeRandom(1, 80, year + month + day + times)
            if (!temp.includes(num)) temp.push(num)
          } while (temp.length < 20);
          const numGua = temp.map(num => {
            if (num < 10) return {
              source: num,
              gua: zy.ZYindex(num, num)
            }
            num += ''
            return {
              source: num,
              gua: zy.ZYindex(num[0], num[1])
            }
          });
          const goodGoodSign = [{ n: 1, txt: '上上卦' }, { n: 2, txt: '上上卦' }, { n: 8, txt: '上上卦' }, { n: 14, txt: '上上卦' }, { n: 21, txt: '上上卦' }, { n: 27, txt: '上上卦' }, { n: 42, txt: '上上卦' }, { n: 43, txt: '上上卦' }, { n: 46, txt: '上上卦' }, { n: 48, txt: '上上卦' }, { n: 49, txt: '上上卦' }, { n: 53, txt: '上上卦' }, { n: 55, txt: '上上卦' }, { n: 58, txt: '上上卦' }, { n: 60, txt: '上上卦' }]
          this.goodGood = numGua.map(e => {
            e.txt = goodGoodSign.find(sign => sign.n === e.gua * 1)?.txt
            return e
          }).sort((a, b) => a.source - b.source)
          console.log(this.goodGood);
          // console.log(zy.ZYindex(7, 7));
        },
        lookGuaRes(item) {
          console.log(item);
          let reply = zy.ZhouyiEx(item.gua)
          let gua = zy.outGua(reply)
          let sixyao = zy.sixyao(reply)
          let outtuan = zy.outtuan(reply)
          let outxiang = zy.outxiang(reply)
          this.zhanbu = ''
          this.octant = { gua, sixyao, outtuan, outxiang }
        },
        ZB() {
          const zb = new ZhanBu(zy)
          const { gnum, bgnum, byao, bgua } = zb.qigua()
          const result = zb.jiegua(gnum, bgnum, byao, bgua)

          this.zhanbu = `<p class="yi-con-tit">今日占卜</p>` + result.split(/\n|\r/).map(i => i && `<p class="yi-des">${i}</p>`).join('')
        }
      },
      created() {
        this.ZB()
      },
    })

  </script>
</body>

</html>